<template>
    <div class="app-container">
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入要添加的分类，并选择等级" v-model="input" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                </el-select>
            </el-input>
            <el-button type="primary" @click="addBlogTypeHandle">添加</el-button>
        </div>

        <el-table
            :data="data"
            style="width: 100%;"
            border
            v-loading="listLoading"
        >
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="name" label="文章类别" align="center"></el-table-column>
            <el-table-column prop="articleCount" label="文章数量" align="center"></el-table-column>

            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="editBlogTypeHandle(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteBlogTypeHandle(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--编辑分类-->
        <el-dialog
            title="编辑文章分类"
            :visible.sync="dialogFormVisible"
        >
            <el-form :model="form">
                <el-form-item label="分类名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="排序等级">
                    <el-select v-model="form.order" placeholder="分类等级">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEditBlogTypeHandle">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getBlogType, addBlogType, deleteBlogType, findOneBlogType, updateOneBlogType } from '@/api/blogType'

export default {
    name: 'blogType',
    data() {
        return {
            input: '',
            select: '1',
            listLoading: false,
            data: [],
            dialogFormVisible: false,
            form: {
                name: '',
                order: ''
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.listLoading = true
            getBlogType().then(res => {
                this.listLoading = false
                this.data = res.data
            })
        },
        // 添加
        addBlogTypeHandle() {
            if (this.input) {
                addBlogType({
                    name: this.input,
                    order: this.select
                }).then(() => {
                    this.fetchData()
                    this.$message.success('添加成功')
                })
            } else {
                this.$message.error('请输入分类名称')
            }
        },

        // 删除
        deleteBlogTypeHandle({ id }) {
            console.log(id)
            this.$confirm('删除后该分类下的文章将变为未分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBlogType(id).then(() => {
                    this.fetchData()
                    this.$message.success('删除成功')
                })
            }).catch(() => {
                this.$message.info('已取消删除')
            })
        },

        // 编辑
        editBlogTypeHandle({ id }) {
            findOneBlogType(id).then(res => {
                this.form = res.data
                this.dialogFormVisible = true
            })
        },
        confirmEditBlogTypeHandle() {
            updateOneBlogType({
                id: this.form.id,
                data: this.form
            }).then(() => {
                this.fetchData()
                this.dialogFormVisible = false
                this.$message.success('编辑成功')
            })
        }
    }
}
</script>

<style scoped lang="scss">
.input-with-select {
    width: 400px;
    margin-right: 20px;
    margin-bottom: 20px;
}
</style>
